<template>
  <div class="container">
    <el-card class="containerCard">
      <div class="containerTitle">保险推荐</div>
      <div class="banner">
        <div class="pic"></div>
        <div class="t1">AI推荐·长期医疗</div>
        <div class="t2">为健康添保障 为家人添保障</div>
        <div class="t2">今日投保，明日无忧</div>
      </div>
      <div class="stepsBox">
        <div class="itemBox" :class="{ current: step == 0, active: step >= 0 }">
          <div class="iconBox">1</div>
          <div class="textBox">
            <div class="t1">填写基础信息</div>
            <div class="t2">AI推荐</div>
          </div>
        </div>
        <div class="itemBox" :class="{ current: step == 1, active: step >= 1 }">
          <div class="iconBox">2</div>
          <div class="textBox">
            <div class="t1">选择保险</div>
            <div class="t2">智能推荐适合的保险</div>
          </div>
        </div>
        <div class="itemBox" :class="{ current: step == 2, active: step >= 2 }">
          <div class="iconBox">3</div>
          <div class="textBox">
            <div class="t1">购买保险</div>
            <div class="t2">投保成功</div>
          </div>
        </div>
      </div>
      <div class="steps1Main" v-show="step == 0">
        <el-form :model="step1Form" :rules="step1Rules" ref="step1Ref" label-width="180px" class="step1FormStyle"
          label-position="right">
          <el-row>
            <el-col :span="12">
              <el-form-item label="年龄" prop="ageSegment">
                <el-select v-model="step1Form.ageSegment" placeholder="请选择年龄段">
                  <el-option label="35岁及以下" value="35岁及以下"></el-option>
                  <el-option label="36-45岁" value="36-45岁"></el-option>
                  <el-option label="46-55岁" value="46-55岁"></el-option>
                  <el-option label="56-65岁" value="56-65岁"></el-option>
                  <el-option label="65岁及以上" value="65岁及以上"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="城市" prop="cityName">
                <el-select v-model="step1Form.cityName" filterable placeholder="请选择城市">
                  <el-option :label="item" :value="item" v-for="(item, index) in citys" :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="岗级" prop="positionLevel">
                <el-select v-model="step1Form.positionLevel" filterable placeholder="请选择城市">
                  <el-option :label="item" :value="item" v-for="(item, index) in jobRanks" :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否经常出差" prop="businessTrip">
                <el-radio-group v-model="step1Form.businessTrip">
                  <el-radio label="是"></el-radio>
                  <el-radio label="否"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否重大疾病" prop="criticalIllness">
                <el-radio-group v-model="step1Form.criticalIllness">
                  <el-radio label="是"></el-radio>
                  <el-radio label="否"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否买过住院险" prop="purchaseHospitalInsurance">
                <el-radio-group v-model="step1Form.purchaseHospitalInsurance">
                  <el-radio label="是"></el-radio>
                  <el-radio label="否"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否在岗" prop="atPost">
                <el-radio-group v-model="step1Form.atPost">
                  <el-radio label="是"></el-radio>
                  <el-radio label="否"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否有基础病" prop="backgroundDisease">
                <el-radio-group v-model="step1Form.backgroundDisease">
                  <el-radio label="是"></el-radio>
                  <el-radio label="否"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="btn">
          <el-button type="warning" @click="resetForm()">重置</el-button>
          <el-button type="primary" @click="step1Next()">下一步</el-button>
        </div>
      </div>
      <div class="steps2Main" v-show="step == 1">
        <div class="steps2Maintitle">保险推荐</div>
        <el-table :data="insuranceTableData" style="width: 100%" :height="calculateHeight">
          <el-table-column prop="insurance_name" label="保险名">
          </el-table-column>
          <el-table-column prop="protection_amount" label="保障金额">
            <template #default="scope">
              <span>{{ scope.row.protection_amount }}万</span>
            </template>
          </el-table-column>
          <el-table-column prop="insurance_type" label="保险种类">
          </el-table-column>
          <el-table-column prop="insured_amount" label="投保金额">
          </el-table-column>
          <el-table-column prop="support_period" label="保障周期">
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-link type="primary" style="margin-right: 0.5vw" @click="seeDetail()">查看详情</el-link>
              <el-link type="success" @click="insure(scope.row.insured_amount)">投保</el-link>
            </template>
          </el-table-column>
        </el-table>
        <pagination :pageSizes="[10]" :total="insuranceTotal" :page.sync="insurancePageNum"
          :limit.sync="insurancePageSize" @pagination="step1SubmitForm()" />

        <div class="btn">
          <el-button @click="step = 0">上一步</el-button>
          <el-button type="primary" @click="step = 2" :disabled="!isInsure">下一步</el-button>
        </div>
      </div>
      <div class="steps2Main" v-show="step == 2">
        <div class="steps2Maintitle">添加投保人</div>
        <el-table :data="applicantTableData" style="width: 100%" :height="calculateHeight">
          <el-table-column prop="name" label="投保人"> </el-table-column>
          <el-table-column prop="id" label="身份证号码"> </el-table-column>
          <el-table-column prop="money" label="金额"> </el-table-column>
          <el-table-column prop="age" label="年龄">
            <template #default="scope">
              <span>{{ scope.row.age }}岁</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-link type="primary" @click="editPerson(scope.row)" style="margin-right: 0.5vw">修改信息</el-link>
              <el-link type="danger" @click="deletePerson(scope.row.name, scope)" v-if="scope.$index !== 0">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
        <div class="addPersonBox" @click="addPerson()">
          <div class="icon"></div>
          <div class="text">添加投保人</div>
        </div>
        <div class="btn">
          <el-button @click="step = 1">上一步</el-button>
          <!-- <el-button type="primary" @click="step = 3">购买</el-button> -->
          <el-button type="primary">购买</el-button>
        </div>
      </div>
    </el-card>
    <el-dialog title="保障详情" :visible.sync="IPB_Visible" custom-class="InsuranceParticularsBox"
      :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="detailsList">
        <div class="itemBox" v-for="(item, index) in detailsListData" :key="index">
          <div class="name">{{ item.name }}</div>
          <div class="value">{{ item.value }}</div>
        </div>
      </div>
      <div class="detailsList2">
        <div class="itemBox">
          <div class="name">首次投保年龄</div>
          <div class="value">18周岁(含)-70周岁(含)</div>
        </div>
        <div class="itemBox">
          <div class="name">等待期</div>
          <div class="value">90天</div>
        </div>
      </div>
      <div class="readme">
        <span class="p1">请阅读</span>
        <el-link type="primary">服务协议</el-link>
        <el-divider direction="vertical"></el-divider>
        <el-link type="primary">客户告知书</el-link>
        <el-divider direction="vertical"></el-divider>
        <el-link type="primary">投保须知</el-link>
        <el-divider direction="vertical"></el-divider>
        <el-link type="primary">保险条款产品说明书</el-link>
        <el-divider direction="vertical"></el-divider>
        <el-link type="primary">健康管理服务协议</el-link>
      </div>
    </el-dialog>
    <AddApplicant ref="addApplicantRef" @confirmAddPerson="confirmAddPerson" @confirmEditPerson="confirmEditPerson">
    </AddApplicant>
  </div>
</template>

<script>
import * as api from './api.js';
import AddApplicant from './components/addApplicant.vue';

export default {
  components: { AddApplicant },
  data() {
    return {
      detailsListData: [
        { name: '医疗费用保险金', value: '400万' },
        { name: '重度恶性肿瘤医疗费用保险金', value: '400万' },
        { name: '质子重离子住院医疗费用保险金', value: '共享400万' },
        { name: '重度恶性肿瘤特药费用保险金', value: '共享400万' },
        { name: '重度恶性肿瘤特药服务', value: '赠送' },
        { name: '就医绿色通道', value: '赠送' },
        { name: '医疗费用垫付', value: '赠送' },
      ],
      jobRanks: [
        '一级',
        '二级',
        '三级',
        '四级',
        '五级',
        '六级',
        '七级',
        '八级',
        '九级',
        '十级',
        '十一级',
        '十二级',
        '十三级',
        '十四级',
        '十五级',
      ],
      citys: [
        '广州市',
        '深圳市',
        '佛山市',
        '珠海市',
        '江门市',
        '东莞市',
        '汕尾市',
        '惠州市',
        '梅州市',
        '湛江市',
        '阳江市',
        '茂名市',
        '揭阳市',
        '汕头市',
        '潮州市',
        '韶关市',
        '河源市',
        '肇庆市',
        '云浮市',
        '清远市',
        '中山市',
      ],
      step: 1,
      isInsure: false,
      //   step1Form: {
      //     ageSegment: null,
      //     cityName: null,
      //     positionLevel: null,
      //     businessTrip: null,
      //     criticalIllness: null,
      //     purchaseHospitalInsurance: null,
      //     atPost: null,
      //     backgroundDisease: null,
      //   },
      step1Form: {
        ageSegment: '35岁及以下',
        cityName: '广州市',
        positionLevel: '一级',
        businessTrip: '是',
        criticalIllness: '是',
        purchaseHospitalInsurance: '是',
        atPost: '是',
        backgroundDisease: '是',
      },
      step1Rules: {
        ageSegment: [{ required: true, message: '请选择年龄段', trigger: 'change' }],
        cityName: [{ required: true, message: '请选择城市', trigger: 'change' }],
        positionLevel: [{ required: true, message: '请选择岗级', trigger: 'change' }],
        businessTrip: [{ required: true, message: '请选择是否经常出差', trigger: 'change' }],
        criticalIllness: [{ required: true, message: '请选择是否重大疾病', trigger: 'change' }],
        purchaseHospitalInsurance: [
          {
            required: true,
            message: '请选择是否买过住院险',
            trigger: 'change',
          },
        ],
        atPost: [{ required: true, message: '请选择是否在岗', trigger: 'change' }],
        backgroundDisease: [{ required: true, message: '请选择是否有基础病', trigger: 'change' }],
      },
      insuranceTableData: [],
      insuranceTotal: 0,
      insurancePageNum: 1,
      insurancePageSize: 10,
      applicantTableData: [
        {
          name: '刘全彷',
          id: '4401**********5512',
          money: '',
          age: 36,
        },
      ],
      IPB_Visible: false,
    };
  },
  computed: {
    calculateHeight() {
      // 获取屏幕宽度
      let screenWidth = document.body.clientWidth;
      if (screenWidth > 1920) {
        return '38vh';
      } else {
        return '31vh';
      }
    },
  },
  mounted() {
    this.step1SubmitForm();
  },
  methods: {
    step1Next() {
      if (this.step1Form.ageSegment == '65岁及以上') {
        this.step1SubmitForm();
      } else if (
        this.step1Form.businessTrip == '是' ||
        ['一级', '二级', '三级', '四级', '五级', '六级'].includes(this.step1Form.positionLevel)
      ) {
        this.$alert('尊敬的客户，鉴于您的场景多样化，为您的安全加双保险，现推荐您购买两份意外险', '温馨提示', {
          confirmButtonText: '确定',
          callback: (action) => {
            this.step1SubmitForm();
          },
        });
      } else {
        this.step1SubmitForm();
      }
    },
    editPerson(row) {
      this.$refs.addApplicantRef.editPerson(row);
    },
    deletePerson(name) {
      this.$confirm('确定删除该人员？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const index = this.applicantTableData.findIndex((item) => item.name === name);
        console.log(index, 123);

        if (index !== -1) {
          this.applicantTableData.splice(index, 1);
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
        } else {
          this.$message({
            type: 'error',
            message: '删除失败!',
          });
        }
      });
    },
    addPerson() {
      let money = this.applicantTableData[0].money || null;
      this.$refs.addApplicantRef.addPerson(money);
    },
    confirmAddPerson(params) {
      this.applicantTableData.push(params);
    },
    confirmEditPerson(params) {
      this.applicantTableData.forEach((item, index) => {
        if (item.name === params.name) {
          this.applicantTableData.splice(index, 1, params);
        }
      });
    },
    resetForm() {
      this.$refs.step1Ref.resetFields();
    },
    step1SubmitForm() {
      this.$refs.step1Ref.validate((valid) => {
        if (valid) {
          api.getList(this.step1Form).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: '提交成功',
                type: 'success',
              });
              this.step = 1;
              this.insuranceTableData = res.rows;
              //   this.insuranceTableData = [
              //     {
              //       insurance_type: "住院险",
              //       city_name: "",
              //       img: "",
              //       update_time: "2025-03-16T16:29:03",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "937",
              //       support_period: "1",
              //       protection_amount: "600",
              //       id: 22,
              //       insurance_name: "太平洋住院医疗综合保险",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "意外险",
              //       city_name: "",
              //       img: "",
              //       update_time: "2025-03-16T16:33:12",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "461",
              //       support_period: "1",
              //       protection_amount: "220",
              //       id: 23,
              //       insurance_name: "意外综合险",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "百万医保",
              //       city_name: "广州市",
              //       img: "",
              //       update_time: "2025-03-16T16:27:07",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "180",
              //       support_period: "1",
              //       protection_amount: "245",
              //       id: 1,
              //       insurance_name: "穗岁康",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "住院险",
              //       city_name: "",
              //       img: "",
              //       update_time: "2025-03-16T16:29:03",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "937",
              //       support_period: "1",
              //       protection_amount: "600",
              //       id: 22,
              //       insurance_name: "太平洋住院医疗综合保险",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "意外险",
              //       city_name: "",
              //       img: "",
              //       update_time: "2025-03-16T16:33:12",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "461",
              //       support_period: "1",
              //       protection_amount: "220",
              //       id: 23,
              //       insurance_name: "意外综合险",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "百万医保",
              //       city_name: "广州市",
              //       img: "",
              //       update_time: "2025-03-16T16:27:07",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "180",
              //       support_period: "1",
              //       protection_amount: "245",
              //       id: 1,
              //       insurance_name: "穗岁康",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "住院险",
              //       city_name: "",
              //       img: "",
              //       update_time: "2025-03-16T16:29:03",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "937",
              //       support_period: "1",
              //       protection_amount: "600",
              //       id: 22,
              //       insurance_name: "太平洋住院医疗综合保险",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "意外险",
              //       city_name: "",
              //       img: "",
              //       update_time: "2025-03-16T16:33:12",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "461",
              //       support_period: "1",
              //       protection_amount: "220",
              //       id: 23,
              //       insurance_name: "意外综合险",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "百万医保",
              //       city_name: "广州市",
              //       img: "",
              //       update_time: "2025-03-16T16:27:07",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "180",
              //       support_period: "1",
              //       protection_amount: "245",
              //       id: 1,
              //       insurance_name: "穗岁康",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "住院险",
              //       city_name: "",
              //       img: "",
              //       update_time: "2025-03-16T16:29:03",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "937",
              //       support_period: "1",
              //       protection_amount: "600",
              //       id: 22,
              //       insurance_name: "太平洋住院医疗综合保险",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "意外险",
              //       city_name: "",
              //       img: "",
              //       update_time: "2025-03-16T16:33:12",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "461",
              //       support_period: "1",
              //       protection_amount: "220",
              //       id: 23,
              //       insurance_name: "意外综合险",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "百万医保",
              //       city_name: "广州市",
              //       img: "",
              //       update_time: "2025-03-16T16:27:07",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "180",
              //       support_period: "1",
              //       protection_amount: "245",
              //       id: 1,
              //       insurance_name: "穗岁康",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "住院险",
              //       city_name: "",
              //       img: "",
              //       update_time: "2025-03-16T16:29:03",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "937",
              //       support_period: "1",
              //       protection_amount: "600",
              //       id: 22,
              //       insurance_name: "太平洋住院医疗综合保险",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "意外险",
              //       city_name: "",
              //       img: "",
              //       update_time: "2025-03-16T16:33:12",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "461",
              //       support_period: "1",
              //       protection_amount: "220",
              //       id: 23,
              //       insurance_name: "意外综合险",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "百万医保",
              //       city_name: "广州市",
              //       img: "",
              //       update_time: "2025-03-16T16:27:07",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "180",
              //       support_period: "1",
              //       protection_amount: "245",
              //       id: 1,
              //       insurance_name: "穗岁康",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "住院险",
              //       city_name: "",
              //       img: "",
              //       update_time: "2025-03-16T16:29:03",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "937",
              //       support_period: "1",
              //       protection_amount: "600",
              //       id: 22,
              //       insurance_name: "太平洋住院医疗综合保险",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "意外险",
              //       city_name: "",
              //       img: "",
              //       update_time: "2025-03-16T16:33:12",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "461",
              //       support_period: "1",
              //       protection_amount: "220",
              //       id: 23,
              //       insurance_name: "意外综合险",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "百万医保",
              //       city_name: "广州市",
              //       img: "",
              //       update_time: "2025-03-16T16:27:07",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "180",
              //       support_period: "1",
              //       protection_amount: "245",
              //       id: 1,
              //       insurance_name: "穗岁康",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "住院险",
              //       city_name: "",
              //       img: "",
              //       update_time: "2025-03-16T16:29:03",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "937",
              //       support_period: "1",
              //       protection_amount: "600",
              //       id: 22,
              //       insurance_name: "太平洋住院医疗综合保险",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "意外险",
              //       city_name: "",
              //       img: "",
              //       update_time: "2025-03-16T16:33:12",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "461",
              //       support_period: "1",
              //       protection_amount: "220",
              //       id: 23,
              //       insurance_name: "意外综合险",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "百万医保",
              //       city_name: "广州市",
              //       img: "",
              //       update_time: "2025-03-16T16:27:07",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "180",
              //       support_period: "1",
              //       protection_amount: "245",
              //       id: 1,
              //       insurance_name: "穗岁康",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "住院险",
              //       city_name: "",
              //       img: "",
              //       update_time: "2025-03-16T16:29:03",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "937",
              //       support_period: "1",
              //       protection_amount: "600",
              //       id: 22,
              //       insurance_name: "太平洋住院医疗综合保险",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "意外险",
              //       city_name: "",
              //       img: "",
              //       update_time: "2025-03-16T16:33:12",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "461",
              //       support_period: "1",
              //       protection_amount: "220",
              //       id: 23,
              //       insurance_name: "意外综合险",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "百万医保",
              //       city_name: "广州市",
              //       img: "",
              //       update_time: "2025-03-16T16:27:07",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "180",
              //       support_period: "1",
              //       protection_amount: "245",
              //       id: 1,
              //       insurance_name: "穗岁康",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "住院险",
              //       city_name: "",
              //       img: "",
              //       update_time: "2025-03-16T16:29:03",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "937",
              //       support_period: "1",
              //       protection_amount: "600",
              //       id: 22,
              //       insurance_name: "太平洋住院医疗综合保险",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "意外险",
              //       city_name: "",
              //       img: "",
              //       update_time: "2025-03-16T16:33:12",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "461",
              //       support_period: "1",
              //       protection_amount: "220",
              //       id: 23,
              //       insurance_name: "意外综合险",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "百万医保",
              //       city_name: "广州市",
              //       img: "",
              //       update_time: "2025-03-16T16:27:07",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "180",
              //       support_period: "1",
              //       protection_amount: "245",
              //       id: 1,
              //       insurance_name: "穗岁康",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "住院险",
              //       city_name: "",
              //       img: "",
              //       update_time: "2025-03-16T16:29:03",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "937",
              //       support_period: "1",
              //       protection_amount: "600",
              //       id: 22,
              //       insurance_name: "太平洋住院医疗综合保险",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "意外险",
              //       city_name: "",
              //       img: "",
              //       update_time: "2025-03-16T16:33:12",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "461",
              //       support_period: "1",
              //       protection_amount: "220",
              //       id: 23,
              //       insurance_name: "意外综合险",
              //       url: "",
              //     },
              //     {
              //       insurance_type: "百万医保",
              //       city_name: "广州市",
              //       img: "",
              //       update_time: "2025-03-16T16:27:07",
              //       create_time: "2025-03-16T11:19:43",
              //       insured_amount: "180",
              //       support_period: "1",
              //       protection_amount: "245",
              //       id: 1,
              //       insurance_name: "穗岁康",
              //       url: "",
              //     },
              //   ];
              this.insuranceTotal = res.total;
            }
          });
        }
      });
    },
    insure(insured_amount) {
      this.isInsure = true;
      this.step = 2;
      this.applicantTableData[0].money = insured_amount;
    },
    seeDetail() {
      this.IPB_Visible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'Alibaba PuHuiTi 3.0';
  src: url('~@/assets/font/AlibabaPuHuiTi-3-55-Regular.ttf') format('woff2');
}

.container {
  padding: 20px;
  background-color: #f7f8fa;
  min-height: calc(100vh - 84px);
  font-family: 'Alibaba PuHuiTi 3.0';

  .containerCard {
    border-radius: 8px;
    min-height: calc(100vh - 130px);

    .containerTitle {
      font-size: 2rem;
      margin-bottom: 0.5vh;
    }
    .banner {
      height: 18vh;
      border-radius: 14px;
      background: linear-gradient(100deg, #e9f7ff 1%, #d9ebfa 101%);
      padding: 2vh 5vw;
      position: relative;

      .pic {
        position: absolute;
        top: 0;
        left: 0;
        width: 90%;
        height: 100%;
        background-image: url('./img/banner.png');
        background-repeat: no-repeat;
        background-position-x: right;
        background-position-y: center;
        background-size: 21vh;
      }

      .t1 {
        font-size: 1.6rem;
        font-weight: 300;
        line-height: 28px;
        letter-spacing: 0px;
        font-variation-settings: 'opsz' auto;
        font-feature-settings: 'kern' on;
        color: #3d3d3d;
        margin-bottom: 2vh;
      }
      .t2 {
        font-size: 2.4rem;
        font-weight: normal;
        line-height: 28px;
        letter-spacing: 0px;
        color: #3d3d3d;
        margin-bottom: 2vh;
      }
    }
    .stepsBox {
      width: 65vw;
      display: flex;
      justify-content: space-between;
      margin: 2vh auto;
      .itemBox {
        display: flex;
        justify-content: center;
        flex: 1;
        .iconBox {
          width: 3rem;
          height: 3rem;
          background-color: #f2f3f5;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          margin-right: 0.5vw;
          font-size: 2rem;
          color: #4e5969;
        }
        .textBox {
          .t1 {
            color: #4e5969;
            font-size: 2rem;
            line-height: 3rem;
          }
          .t2 {
            color: #86909c;
            font-size: 1.5rem;
          }
        }
      }

      .active {
        .iconBox {
          background: #e8f3ff url('./img/icon1.png') no-repeat center center;
          background-size: 1rem;
          color: transparent;
        }
        .textBox {
          .t1 {
            color: #1d2129;
          }
        }
      }
      .current {
        .iconBox {
          background-color: #165dff;
          color: #fff;
        }
        .textBox {
          .t1 {
            color: #1d2129;
          }
        }
      }
    }
    .steps1Main {
      width: 70%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      .step1FormStyle {
        width: 100%;
        height: 25vh;
        margin: 2vw auto;
        .el-form-item {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 40px;
        }
        ::v-deep .el-radio__label {
          font-size: 1.2rem;
        }
        ::v-deep .el-form-item__label {
          font-size: 1.3rem;
        }
        ::v-deep .el-form-item__content {
          width: fit-content;
          margin: 0 !important;
          .el-input__inner {
            font-size: 1.2rem;
          }
        }
        ::v-deep .el-form-item__error {
          white-space: nowrap;
          font-size: 1rem;
        }
      }
      .btn {
        width: fit-content;
        margin: 30px auto;
      }
    }
    .steps2Main {
      width: 100%;
      margin: 0 auto;
      .steps2Maintitle {
        color: #1d2129;
        font-size: 1.5rem;
        margin-bottom: 1vh;
      }
      ::v-deep .el-table {
        .el-table__cell {
          padding: 15px 0;
        }
        .el-table__header-wrapper {
          th {
            height: 60px;
          }
        }
        .cell {
          font-size: 1.3rem;
        }
        .el-link {
          font-size: 1.3rem;
        }
      }
      .addPersonBox {
        height: 40px;
        margin-bottom: 12px;
        cursor: pointer;
        background-color: #f7f8fa;
        display: flex;
        justify-content: center;
        align-items: center;
        user-select: none;
        .icon {
          width: 1.25rem;
          height: 1.25rem;
          background: url('./img/icon2.png');
          background-repeat: no-repeat;
          background-size: cover;
          margin-right: 0.5vw;
          transition: 0.7s ease-in-out;
        }
        .text {
          font-size: 1.3rem;
          color: #3d3d3d;
        }
        &:hover {
          background-color: #f2f3f5;
          .icon {
            transform: rotate(360deg);
          }
          .text {
            color: #3d3d3d;
          }
        }
      }
      .btn {
        width: fit-content;
        margin: 0 auto;
      }
    }
  }
  ::v-deep .el-dialog__wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    .InsuranceParticularsBox {
      width: 25vw;
      border-radius: 8px;
      margin: 0 !important;
      .el-dialog__body {
        padding: 0 30px;
      }
      .el-dialog__header {
        padding: 30px;
        padding-bottom: 0;
      }
      .el-dialog__title {
        font-size: 1.7rem;
        font-weight: bold;
      }
      .detailsList {
        border-bottom: 0.2rem solid #f6f6f6;
        padding: 2vh 0;
        .itemBox {
          display: flex;
          justify-content: space-between;
          margin-bottom: 1vh;
          .name {
            color: #3d3d3d;
            font-size: 1.3rem;
          }
          .value {
            color: #b5b5b5;
            font-size: 1.2rem;
          }
        }
      }
      .detailsList2 {
        padding: 2vh 0;

        .itemBox {
          display: flex;
          justify-content: space-between;
          margin-bottom: 1vh;
          .name {
            color: #3d3d3d;
            font-size: 1.3rem;
          }
          .value {
            color: #b5b5b5;
            font-size: 1.2rem;
          }
        }
      }
      .readme {
        margin-block: 2vh;
        .p1 {
          font-size: 1.2rem;
          margin-right: 0.3vw;
        }
        .el-link--inner {
          vertical-align: text-bottom;
        }
      }
    }
  }
}
</style>
